<template>
  <div class="outer-box">
    <div class="box">
      <h1>COOL-ADMIN</h1>
      <p>一款快速开发后台权限管理系统</p>
      <div class="inp">
        <label for="username">用户名</label>
        <input
          v-model="username"
          type="text"
          id="username"
          placeholder="请输入用户名"
        />
      </div>
      <div class="inp">
        <label for="password">密码</label>
        <input
          v-model="password"
          type="password"
          id="password"
          placeholder="请输入密码"
        />
      </div>
      <div class="inp">
        <label for="verCode">图片验证码</label>
        <input
          v-model="verCodeText"
          type="text"
          id="verCode"
          placeholder="图片验证码"
          maxlength="4"
          @keyup.enter="login"
        />
        <div
          ref="code"
          class="verCode"
          v-html="verCode"
        ></div>
      </div>

      <div class="btn">
        <button @click="login">登录</button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ElMessage } from "element-plus"
import { ref } from "vue"

// 将token过期时间存储在本地
import { storeToken } from "@/utils/storeToken"

// 引入处理本地存储的包
import store from "store2"

// 引入仓库
import user from "@/stores/user"

// 引入接口
import { loginApi, getVerCodeApi } from "@/api"
import router from "@/router"

// 实例化仓库
const userStore = user()

// v-model绑定值
const username = ref("admin")
const password = ref("123456")
const verCodeText = ref("")

// 验证码
const verCode = ref("")
// 验证码id
const codeId = ref("")

// 记录正在登录
let loging = false

// 获取验证码
getVerCode()

// 获取验证码
async function getVerCode() {
  const res = await getVerCodeApi()
  codeId.value = res.captchaId
  verCode.value = res.data
}

// 登录
function login() {
  // 如果正在登录则不允许登录
  if (loging) {
    console.log(123)
    return
  }

  if (!username.value.length) {
    ElMessage({
      showClose: true,
      message: "用户名不能为空",
      type: "error"
    })
    return
  }
  if (!password.value.length) {
    ElMessage({
      showClose: true,
      message: "密码不能为空",
      type: "error"
    })
    return
  }
  if (!verCode.value.length) {
    ElMessage({
      showClose: true,
      message: "未填验证码",
      type: "error"
    })
    return
  }

  // 记录正在登录中
  loging = true
  
  // 调用接口
  loginApi(
    username.value,
    password.value,
    codeId.value,
    verCodeText.value
  )
    .then((res) => {
      ElMessage({
        showClose: true,
        message: "登录成功",
        type: "success"
      })
      workRes(res)
      // 将登录中重新为false
      loging = false

      // 跳转到root路由
      router.push({
        name: "root",
        replace: true
      })
    })
    .catch((err) => {
      ElMessage({
        showClose: true,
        message: err.message,
        type: "error"
      })
      // 错误后刷新一次验证码
      getVerCode()
      // 将登录中重新为false
      loging = false
    })
}

// 处理token等
function workRes(res: loginType) {
  const {
    token,
    refreshToken,
    expire,
    refreshExpire
  } = res
  // 将token,刷新token和两个过期时间放到本地内存中
  store.set("token", token)
  store.set("refreshToken", refreshToken)
  store.set("expire", expire)
  store.set("refreshExpire", refreshExpire)

  // 存在store中一份
  userStore.token = token
  userStore.refreshToken = refreshToken
  userStore.refreshExpire = refreshExpire
  userStore.expire = expire

  // 将用户token过期时间也存在本地
  storeToken()
}
</script>

<style scoped lang="scss">
.outer-box {
  position: fixed;
  background-color: var(--primary-color);
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99;
  .box {
    h1 {
      font-size: 38px;
      font-weight: bold;
      letter-spacing: 5px;
      color: white;
      margin-bottom: 30px;
      white-space: nowrap;
    }
    p {
      color: #eee;
      font-size: 14px;
      letter-spacing: 1px;
      margin-bottom: 50px;
      text-align: center;
    }
    .inp {
      position: relative;
      margin-bottom: 20px;
      label {
        margin-bottom: 8px;
        line-height: 22px;
        color: #ccc;
        display: block;
      }
      input {
        color: #fff;
        border: 0;
        height: 40px;
        width: calc(100% - 4px);
        margin: 0 2px;
        padding: 0 2px;
        box-sizing: border-box;
        -webkit-text-fill-color: #fff;
        font-size: 14px;
        border-bottom: 1px solid
          rgba(255, 255, 255, 0.5);
        background-color: transparent;
      }

      .verCode {
        position: absolute;
        right: 0;
        top: 25px;
      }
    }

    .btn {
      text-align: center;
      margin-top: 40px;
      button {
        width: 140px;
        height: 40px;
        box-sizing: border-box;
        padding: 8px 15px;
        cursor: pointer;
        font-size: 15px;
        color: var(--primary-color);
        user-select: none;
        border-radius: 20px;

        &:hover {
          color: #4165d7;
          border-color: #c6d1f3;
          background-color: #ecf0fb;
        }
      }
    }
  }
}
</style>
